<template>
  <view class="food-detail">
    <view class="cart isCartShow" @click="pushCart">
      <image src="../../static/home/cart.png" mode="widthFix"
             style="width: 70%;height: 70%;vertical-align: middle;"></image>
    </view>

    <!-- 美食图片 -->
    <image class="food-image" mode="aspectFill" :src="'/api/common/download?name='+food.image"></image>
    <!-- 美食介绍 -->
    <view class="food-info">
      <text class="food-name">{{ food.name }}</text>
      <br>
      <view class="number-selector">
        <text class="food-price">￥{{ food.price }}
        </text>
        <view class="selector">
          <uni-number-box v-model="food.number" :min="0" :max="10" @change="handleChange(food)">
          </uni-number-box>
        </view>
      </view>

      <text class="food-description">{{ food.description }}</text>
      <br>
    </view>
  </view>
</template>

<script>
import {
  getInfoApi
} from "@/network/api";
import {handleChange ,pushCart} from "@/common/common";

export default {
  data() {
    return {
      food: {
        name: "美味佳肴",
        price: "50",
        image: "8b9d8142-1da4-496e-a6b4-bec74b8dbf0a.jpg",
        description: "这是一道美味的佳肴，口感鲜美，风味独特。",
        number: 0
      },
      shop: {},
      dishId: '',
      shopId: '',
      selectedNumber: 0
    };
  },
  onLoad(e) {
    console.log(e.dish)
    // 获取json数据
    this.shopId = e.shopId
    Object.assign(this.food, JSON.parse(e.dish))
    this.getData()
  },
  methods: {
    handleChange ,
    getData(e) {
      const _this = this
      getInfoApi(this.shopId).then(res => {
        Object.assign(_this.shop, res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    pushCart,
  }
};
</script>

<style scoped>
.food-detail {
  padding: 20px;
}

.food-image {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.food-info {
  margin: 20px 20px 20px 20px;
}

.food-name {
  font-size: 20px;
  font-weight: bold;
}

.food-price {
  font-size: 20px;
  color: red;
}

.number-selector {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.selector {
  padding-left: 330rpx;
}

.food-description {
  margin-top: 10px;
  font-size: 16px;
  color: #666;
}


.isCartShow {
  animation-name: move;
  animation-duration: 1s;
}


.cart {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  position: fixed;
  bottom: calc(var(--window-bottom) + 30rpx);
  right: 16rpx;
  background-color: white;
  text-align: center;
  line-height: 100rpx;
  box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);
}
</style>